<template>
  <el-dialog class="public-dialog" title="选择变更SKU" width="1000" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <div class="order-box grid grid-cols-2 gap-y-3 mb-[16px]">
        <div class="after"></div>
        <VText v-for="item in oldOrderColumn" :key="item.key" :title="item.label" :value="orderData[item.key]" :line="1" />
      </div>
      <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="formData" :originOption="originOption" @submit="queryTableList"></XForm>

      <vxe-grid v-bind="tableOptions" ref="tableRef" />
    </div>

    <template #footer>
      <el-button type="primary" :loading="loading" @click="submit"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { planSpaList } from "@/api/plan"
import XForm from "@/components/XForm/index.vue"
const emit = defineEmits(["submit"])
const modelValue = ref(false)
const data = reactive({
  orderData: {},
  formData: {
    skuRange: { type: "sku", value: "" },
  },
  loading: false,
})
const { orderData, formData, loading } = toRefs(data)

const oldOrderColumn = ref([
  { label: "备货计划单", key: "pr_number" },
  { label: "备货类型", key: "plan_type_text" },
  { label: "计划部门", key: "planning_department" },
  { label: "计划状态", key: "plan_status" },
])

const tableRef = ref()
const reviewColor = {
  已驳回: "text-[#E50113] bg-[#FCE5E7]",
  已审核: "text-[#333] bg-[#F0F0F2]",
  // text-blue
}
const tableOptions = reactive({
  border: true,
  height: 600,
  // rowConfig: { height: 130 },
  showOverflow: false,
  columns: [
    { type: "radio", fixed: "left", width: 60 },
    {
      title: "图片",
      width: 110,
      slots: {
        default: ({ row }) => <el-image style="width:80px;height:80px" src={row.sku_attr_img} />,
      },
    },
    {
      title: "商品信息",
      width: 190,
      slots: {
        default: ({ row }) => (
          <div>
            <div class="flex items-center">
              <div class="flex mr-[4px]">
                <div class={`status-tag  mr-[2px] ${reviewColor[row.review_status_text] || "text-[#FAAD14] bg-[#FEF6E7]"}`}>{row.review_status_text}</div>
              </div>
              <div class="text-blue">SKU: {row.sku}</div>
            </div>
            <VText title="自定义" value={row.custom_sku} line={1} />
            <VText title="ASIN" value={row.asin} line={1} />
            <VText title="国家" value={row.site_code} line={1} />
          </div>
        ),
      },
    },
    {
      title: "商品名称",
      width: 150,
      slots: {
        default: ({ row }) => <VText value={row.sku_title} line={3} />,
      },
    },
    {
      title: "采购信息",
      width: 180,
      slots: {
        default: ({ row }) => (
          <div>
            <div class="flex items-center">
              <div>
                <VText title="采购价" value={row.spa_purchases?.purchase_price} line={1} />
              </div>
              <el-divider direction="vertical" />
              {row.spa_purchases?.min_order_quantity}起批
            </div>
            <VText title="采购天数" value={row.spa_purchases?.purchase_days} line={1} />
            <VText title="单箱数量" value={row.spa_purchases?.mpq_min_quantity} line={1} />
            <VText title="供应商" value={row.spa_purchases?.supplier_name} line={1} />
          </div>
        ),
      },
    },

    {
      title: "需求数量",
      width: 80,
      slots: {
        default: ({ row }) => <VText value={row.spa_analysis.stocking_quantity} />,
      },
    },
    {
      title: "总金额/RMB",
      width: 120,
      slots: {
        default: ({ row }) => <div>¥ {row.spa_analysis?.total_amount}</div>,
      },
    },
    { field: "name", width: 160, title: "预计到货时间 x" },
  ],
  pagerConfig: {},
  proxyConfig: {
    // autoLoad: false,
    props: { result: "data", total: "total" },
    ajax: {
      query: ({ page, form }) => {
        let params = {
          ...formData.value,
          pr_number: orderData.value.pr_number,
          [formData.type]: formData.value,
          page: page.currentPage,
          page_num: page.pageSize,
        }
        console.log(params)
        return planSpaList(params)
      },
    },
  },
})

const queryTableList = () => {
  tableRef.value.commitProxy("reload")
}

onMounted(() => {
  getOption()
})

import { enumOptions } from "@/api"
import { getCountry } from "@/api"
const originOption = ref({})
const getOption = async () => {
  const data = (await enumOptions({ params: ["sku_status"] }))?.data
  for (const key in data) {
    originOption.value[key] = data[key]
  }
  originOption.value.country = (await getCountry()).data
}

const formOption = ref({ inline: true, option: true })
const fieldList = ref([
  {
    field: "skuRange",
    placeholder: "可批量搜索",
    select: [
      { label: "SKU", value: "sku" },
      { label: "自定义SKU", value: "custom_sku" },
      { label: "ASIN", value: "asin" },
    ],
    selectStyle: { width: "100px" },
    style: { width: "200px" },
  },
  {
    field: "sales_status",
    type: "select",
    originField: "sku_status",
    options: {
      placeholder: "商品状态",
    },
    style: { width: "120px" },
  },
  {
    field: "site_code",
    type: "select",
    originField: "country",
    options: {
      placeholder: "国家",
    },
    style: { width: "200px" },
  },
])
const submit = () => {
  const radioRecord = tableRef.value.getRadioRecord()
  console.log(radioRecord)
  if (!radioRecord) {
    return ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
  }
  console.log(899998)
  emit("submit", radioRecord)
  handleClose()
}
const handleClose = () => {
  modelValue.value = false
  // form?.value.resetForm()
}
const open = (params = {}) => {
  modelValue.value = true
  console.log(1009988)
  console.log(params)
  // setTimeout(() => {
  //   initEcharts()
  // }, 1000)
  orderData.value = params
  console.log(orderData.value)
  queryTableList()
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.form-box {
  border: 1px solid #eff3fe;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.order-box {
  background: #fef6e7;
  padding: 10px 20px;
  position: relative;
  border-radius: 4px;
  .after {
    position: absolute;
    left: 0;
    top: 12px;
    width: 5px;
    height: 52px;
    background: #faad14;
    border-radius: 0px 100px 100px 0px;
  }
}
</style>
